<script src="<?=base_url();?>asset/js/Chart.js"></script>
<!--script>
		$(document).ready(function(){
			
			$('#menu-mhs').click(function(){
				$('#konten').panel({
					href:base_url+'mahasiswa'
				});
			});
			$('#menu-krs').click(function(){
				$('#konten').panel({
					href:base_url+'krs'
				});
			});
			$('#menu-trns').click(function(){
				$('#konten').panel({
					href:base_url+'transkrip'
				});
			});
			$('#menu-ka').click(function(){
				$('#konten').panel({
					href:base_url+'kalender_akademik'
				});
			});
		});
</script-->

<link rel="stylesheet" type="text/css" href="<?=base_url();?>asset/css/dashboard.css" />
<div class="container">
	<h1 align="center">Grafik Jumlah Penduduk Berdasarkan Usia</h1>
	<div class="content">
		<div class="diagram">
			<h2><?php //$l = count($lblDiagram)-1; echo $lblDiagram[0].' - '.$lblDiagram[$l];?></h2>
			<div id="diagram" style="width:auto;height:250px" align="center"><canvas id="canvas"></canvas></div>
		</div>
</div>

<script>
	var canvasNode = document.getElementById("canvas");
	var canvasParent = document.getElementById("diagram");
	canvasNode.width = (canvasParent.clientWidth * 100) / 100;
	canvasNode.height = canvasParent.clientHeight;
	<?php
		$phpArr = $lblDiagram;
		$jsArr = json_encode($phpArr);
		echo "var labelArr = ". $jsArr . ";\n";
	?>
	<?php
		$phpArr = $dataDiagram;
		$jsArr = json_encode($phpArr);
		echo "var dataArr = ". $jsArr . ";\n";
	?>
	var lineChartData = {
		labels : labelArr,
		datasets : [
			{
				fillColor : "rgba(151,187,205,0.5)",
				strokeColor : "rgba(151,187,205,1)",
				pointColor : "rgba(151,187,205,1)",
				pointStrokeColor : "#fff",
				data : dataArr
			}
		]
		
	}

	var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
</script>